<template>
    <div
        class="a-control-group"
        :class="[`direction-${direction}`, withSpace ? 'with-space' : '']"
        :style="style"
    >
        <slot></slot>
    </div>
</template>

<style lang="scss">
@import "../scss/vars";

.a-control-group {
    &.direction-h {
        & > *:not(:last-child):not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > *:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        & > .a-control-group:not(:last-child) > *:not(.sharp) {
            border-top-right-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > .a-control-group:not(:first-child) > *:not(.sharp) {
            border-top-left-radius: unset !important;
            border-bottom-left-radius: unset !important;
        }

        &.with-space > *:not(:last-child) {
            margin-right: 1px;
        }
    }
    &.direction-v {
        flex-direction: column;

        & > *:not(:last-child):not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > *:not(:first-child):not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        & > .a-control-group:not(:last-child) > *:not(.sharp) {
            border-bottom-left-radius: unset !important;
            border-bottom-right-radius: unset !important;
        }
        & > .a-control-group:not(:first-child) > *:not(.sharp) {
            border-top-left-radius: unset !important;
            border-top-right-radius: unset !important;
        }

        &.with-space > *:not(:last-child) {
            margin-bottom: 1px;
        }
    }
}
</style>

<script>
export default {
    name: 'AControlGroup',
    props: {
        direction: {
            type: String,
            default: 'h',
        },
        /**
         * 是否是块级元素，默认为false，即行内元素，样式为inline-flex，如果block为true，则样式为flex
         */
        block: {
            type: Boolean,
            default: false,
        },
        /**
         * 组件间是否有间隔
         */
        withSpace: {
            type: Boolean,
            default: false,
        },
        /**
         * 布局类型，可选flex、grid、block，默认为flex
         */
        type: {
            type: String,
            default: 'flex',
        },
    },
    computed: {
        style() {
            if (this.type == 'flex') {
                if (this.block) {
                    return 'display: flex'
                }
                return 'display: inline-flex'
            }
            if (this.type == 'grid') {
                if (this.block) {
                    return 'display: grid'
                }
                return 'display: inline-grid'
            }
            if (this.block) {
                return ''
            }
            return 'display: inline-block'
        },
    },
};
</script>